<template>
   <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
         <el-form :inline="true" :model="filters">
            <el-form-item>
               <el-button @click="reload" icon="el-icon-arrow-left" circle></el-button>
            </el-form-item>
            <el-form-item>
               <el-input v-model="filters.keyword" placeholder="班级、姓名或学号" style="width:200px" clearable></el-input>
            </el-form-item>

            <el-form-item>
               <el-button type="primary" v-on:click="search" icon="el-icon-search" style="margin-left: 15px;">查询
               </el-button>
            </el-form-item>

            <el-form-item style="float:right;">
               <el-button type="primary" @click="showAdd" icon="el-icon-circle-plus-outline">新增</el-button>
            </el-form-item>
            <el-form-item style="float:right">
               <el-upload action="/api/批量导入" name="file" :on-success="onSuccess" :on-error="onError">
                  <el-button type="primary" icon="el-icon-circle-plus-outline">批量导入</el-button>
               </el-upload>
            </el-form-item>
         </el-form>
      </el-col>

      <!--列表-->
      <el-table :data="dataList" border highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                style="width: 100%;">

         <el-table-column type="index" width="100">
         </el-table-column>
         <el-table-column prop="user.workid" label="学号" width="200">
         </el-table-column>
         <el-table-column prop="clazz.name" label="班级" min-width="100">
         </el-table-column>
         <el-table-column prop="user.realname" label="姓名" min-width="120">
         </el-table-column>

         <el-table-column label="操作" width="300">
            <template slot-scope="scope">
               <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)"
                          icon="el-icon-delete">删除
               </el-button>
            </template>
         </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
         <el-pagination layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="pageSizes"
                        :page-size="pageSize" :total="total" style="float:right;">
         </el-pagination>
      </el-col>

      <!--单个新增学生界面-->
      <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
         <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
            <el-form-item label="学生学号" prop="workid">
               <el-input v-model="formData.workid" :disabled="action!='add'"></el-input>
            </el-form-item>
            <el-form-item label="班级">
               <el-select v-model="formData.schoolid" placeholder="请选择学院" style="width: 120px;float:left" @change="departmentChange(formData.schoolid)">
                  <el-option
                          v-for="item in school"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                  >
                  </el-option>
               </el-select>
               <el-select v-model="formData.departmentid" placeholder="请选择系" style="width: 120px;float:left" @change="majorChange(formData.departmentid)">
                  <el-option
                          v-for="item in department"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                          >
                  </el-option>
               </el-select>
               <el-select v-model="formData.majorid" placeholder="请选择专业" style="width: 120px;float: left" @change="classChange(formData.majorid)">
                  <el-option
                          v-for="item in major"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
               </el-select>
               <el-select v-model="formData.classid" placeholder="请选择班级" style="width: 150px;float:left">
                  <el-option
                          v-for="item in classtotal"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="realname">
               <el-input v-model="formData.realname" :disabled="action!='add'"></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click.native="formVisible = false">取消</el-button>
            <el-button type="primary" @click.native="saveSubmit" :loading="submitLoading">提交</el-button>
         </div>
      </el-dialog>

   </section>
</template>

<script>
    export default {
        data() {
            return {
                school:[],
                department: [],
                major: [],
                classtotal: [],
                filters: {
                    keyword: ''
                },
                teacherid:'',
                optionsDepartmentOrClass:[],
                listLoading: false, //是否显示加载动画
                submitLoading: false,

                dataList: [], //数据列表(用户)

                total: 0,
                pageIndex: 1, //页码
                pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
                pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表

                sels: [],//列表选中列

                action: '', // 'add'-添加，'edit'-编辑，'detail'-详情
                formVisible: false, //界面是否显示
                formTitle: '', //界面标题
                formRules: {
                    realname: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    workid: [
                        {required: true, message: '请输入学生学号', trigger: 'blur'}
                    ],
                    classid: [
                        {required: true, message: '请选择班级', trigger: 'blur'}
                    ],
                },

                //新增/编辑界面数据
                formData: {
                    schoolid:'',
                    departmentid:'',
                    majorid:'',
                    workid: '',
                    classid: '',
                    realname:''
                },
            }
        },
        methods: {
            //页面
            selsChange: function (sels) { //保存复选框选中的记录
                this.sels = sels;
            },
            handleChange:function (value) {
                if(this.formData.usertype == 1){
                    this.formData.departmentid = value[value.length-1];
                } else {
                    this.formData.classid = value[value.length-1];
                }
            },
            handleReset() {
                this.filters.keyword = "";
                this.userState = "";
            },
            handleSizeChange(val) { //改变分页大小
                this.pageSize = val;
                this.getDataList();
            },
            handleCurrentChange(val) { //页码跳转
                this.pageIndex = val;
                this.getDataList();
            },
            search() {
                this.getDataList();
            },
            getDataList() { //获取数据列表（用户）
                let para = {
                    courseteacherid:this.courseteacherid,
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    keyword: this.filters.keyword,
                    state: this.userState,
                };
                this.listLoading = true;
                 this.$http.post('/api/coursestudent/findStudentsByCondition', para).then(res => {
                     this.listLoading = false;
                     this.total = res.data.total;
                     this.dataList = res.data.data;
                 }).catch((error) => {
                     this.listLoading = false;
                     if (error) console.log(error);
                 });
            },
            getDepartmentOrClassTree(rank){
                this.$http.get("/api/school/getSchoolMajorClassTree/"+rank).then((res) => {
                    this.optionsDepartmentOrClass = res.data.data;
                }).catch((error) => {
                    console.log(error);
                });
            },
            handleDel: function (index, row) { //删除
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let para = {id: row.studentInfo.id};
                    this.$http.get('/api/coursestudent/remove/' +para.id).then((res) => {
                        if (res.data.code === 0) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                        this.getDataList();
                    });
                }).catch(() => {
                    if (error) console.log(error);
                });
            },
            showAdd: function () { //显示单个新增界面
                this.$http.get('/api/school/findAllschool/').then((res)=>{
                    this.school=res.data.data;
                    console.log(this.school);
                    console.log("00");
                });
                this.formVisible = true;
                this.formData = {
                    workid: '',
                    realname:'',
                    classid:''
                };
                this.action = "add";
                this.formTitle = '新增';
            },
            onSuccess:function (response,file) {
                console.log(response);
                console.log("文件上传成功");
            },
            onError:function () {
                console.log("文件上传失败");
            },
            showEdit: function (index, row) { //显示详情界面

                this.formVisible = true;
                this.formData = Object.assign({}, row);

                this.formData.usertype=this.formData.usertype+'';
                this.formData.state=this.formData.state+''; //转成string

                this.action = "edit";
                this.formTitle = '详情';
                console.log(this.formData);
            },
            saveSubmit: function () { //保存：单个新增
                let apiPath = '';
                if (this.action == 'add') {
                    apiPath = '/api/coursestudent/addOne/'+this.courseteacherid;
                }

                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.submitLoading = true;
                    let para = {
                        workid:this.formData.workid,
                        realname: this.formData.realname,
                        classid: this.formData.classid,
                    };
                    console.log(para);


                   this.$http.post(apiPath, para).then(res => {
                         this.submitLoading = false;
                         if (res.data.code == 0) {
                             this.$message({
                                 message: '提交成功',
                                 type: 'success'
                             });
                             this.$refs['formData'].resetFields();
                             this.formVisible = false;
                             this.getDataList(); //重新加载数据
                         } else {
                             this.$message({
                                 message: '提交失败',
                                 type: 'error'
                             });
                         }
                     }).catch((error) => {
                         this.submitLoading = false;
                         if (error) console.log(error);
                     });
                });
            },
            reload(){
                this.$router.push({path:"/teachManage"});
            },
            departmentChange:function (num) {
                console.log(this.formData.schoolid);
                console.log(num);
                this.$http.get('/api/department/finddepartmentbyschoolid/'+num).then((res)=>{
                    this.department=res.data.data;
                    console.log(this.department);
                    console.log("00");
                });
            },
            majorChange:function (num) {
                console.log(this.formData.departmentid);
                console.log(num);
                this.$http.post('/api/major/findmajorbydepid/'+this.formData.departmentid).then((res)=>{
                    this.major=res.data.data;
                    console.log(this.major);
                    console.log("00");
                });
            },
            classChange:function (num) {
                console.log(this.formData.majorid);
                this.$http.post('/api/class/findclassbymajorid/'+this.formData.majorid).then((res)=>{
                    this.classtotal=res.data.data;
                    console.log(this.classtotal);
                    console.log("01");
                });
            }

        },
        mounted() {
           this.courseteacherid=this.$route.query.courseteacherid;
           this.teacherid=this.$route.query.teacherid;
            this.getDataList(); //进入页面就加载数据
            // switch (this.)
        }
    }

</script>

<style scoped>

</style>
